<template>
  <!-- 绑定模版参数列表 弹窗 -->
  <a-modal
    v-model:open="visible"
    title="绑定模版参数列表"
    @ok="handleOk"
    destroyOnClose
    :width="1000"
    @cancel="cancel"
    :footer="null"
    centered
  >
    <a-table
      :dataSource="tableData"
      :columns="columns"
      size="small"
      :scroll="{ x: 'max-content' }"
      @resizeColumn="handleResizeColumn"
      :pagination="false"
      :loading="tableLoading"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'handle'">
          <a-button
            type="link"
            @click="handleRelease(record)"
            :loading="releaseLoading"
            >解除绑定</a-button
          >
          <a-button
            type="link"
            @click="handleEditPoint(record)"
            :loading="releaseLoading"
            >编辑告警点位</a-button
          >
        </template>
      </template>
    </a-table>
    <a-pagination
      v-model:current="filterForm.current"
      v-model:page-size="filterForm.size"
      :total="total"
      position="bottomRight"
      show-size-changer
      @change="getParamCodeDetails"
      :show-total="(total) => `总共 ${total} 条`"
    >
      <template #buildOptionText="props">
        <span>{{ props.value }}条/页</span>
      </template>
    </a-pagination>
  </a-modal>

  <!-- 编辑告警点位 -->
  <EditPoint
    :editPointVisible="editPointVisible"
    :rowData="paramsRowData"
    :parentParamsRowData="rowData"
    @update:editPointVisible="editPointVisible = $event"
    @getParamCodeDetails=getParamCodeDetails
  />
</template>
<script setup>


import EditPoint from "./editPoint.vue";
const $api = inject("$api");
const props = defineProps({
  paramListVisible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
  },
});
const visible = ref(props.paramListVisible);
const emits = defineEmits(["update:paramListVisible", "getParamCodePage"]);
watch(
  () => props.paramListVisible,
  (val) => {
    visible.value = val;
    if (val) {
      getParamCodeDetails();
    }
  }
);
const labelCol = { style: { width: "130px" } };
const total = ref();
const tableData = ref([]);
const editPointVisible = ref(false);
const filterForm = ref({
  current: 1,
  size: 10,
});
const paramsRowData = ref({});
const releaseLoading = ref(false);
const columns = ref([
  {
    title: "所属厂商",
    dataIndex: "supplierName",
    key: "supplierName",
    width: 150,
    resizable: true,
    align: "center",
  },
  {
    title: "所属型号",
    dataIndex: "supplierTypeName",
    key: "supplierTypeName",
    width: 120,
    resizable: true,
    align: "center",
  },
  {
    title: "模版参数名称",
    dataIndex: "name",
    key: "name",
    width: 120,
    resizable: true,
    align: "center",
  },
  {
    title: "模版属性名称",
    dataIndex: "attrName",
    key: "attrName",
    width: 120,
    resizable: true,
    align: "center",
  },
  {
    title: "模版参数描述",
    dataIndex: "paramDesc",
    key: "paramDesc",
    width: 150,
    resizable: true,
    align: "center",
  },
  {
    title: "告警规则",
    dataIndex: "evtRuleStr",
    key: "evtRuleStr",
    width: 250,
    resizable: true,
    align: "center",
  },
  {
    title: "告警点位值",
    dataIndex: "alarmPointValue",
    key: "alarmPointValue",
    width: 120,
    resizable: true,
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "handle",
    key: "handle",
    width: 200,
    resizable: true,
    align: "center",
    fixed: "right",
  },
]);
const cancel = () => {
  emits("update:paramListVisible", false);
};
const tableLoading = ref(false);
const getParamCodeDetails = async () => {
  const params = {
    ...filterForm.value,
    id: props.rowData.id,
  };
  tableLoading.value = true;
  const res = await $api.paramCodeDetails(params);
  tableLoading.value = false;
  if (res && res.code === 0) {
    tableData.value = res.data.records;
    total.value = res.data.total;
  }
};
const handleRelease = async (data) => {
  const params = {
    paramCodeId: props.rowData.id,
    modelParamId: data.id,
  };
  releaseLoading.value = true;
  const res = await $api.paramCodeRelateRelease(params);
  releaseLoading.value = false;
  if (res && res.code === 0) {
    message.success("解除绑定成功");
    getParamCodeDetails();
  }
};
const handleEditPoint = async (data) => {
  paramsRowData.value = data;
  editPointVisible.value = true;
};
</script>

<style lang="less" scoped>
.ant-table {
  .ant-btn {
    padding: 4px 5px;
  }
}
</style>